<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<image :src="baseurl+'association/postHeadBg.png'" class="headBg"></image>
		<input type="text" class="title" placeholder="请输入帖子主题" v-model="title" />
		<textarea class="info" placeholder="请输入您要发布的内容（非必填）" maxlength="-1" v-model="content"/>
		<view class="imgBox">
			<view class="imgItem" v-for="(img, index) in imgList" :key="index">
				<image :src="img" class="uploadedImg" mode="aspectFill"></image>
				<view class="deleteBtn" @click.stop="deleteImage(index)">
					<view class="deleteX"></view>
				</view>
			</view>
			<view class="add" @click="chooseImage()">+</view>
		</view>
		<view class="submit" @click="submit()">
			<text class="label">发布</text>
		</view>
		<!-- 结果 -->
		<view class="resultBox" v-if="isResult">
			<view class="success" v-if="isSuccess">
				<image :src="baseurl+'associationAdd/23.png'" class="postSuccess"></image>
				<text class="result">感谢您的分享</text>
				<text class="tips">您的帖子将于审核成功后发布</text>
				<view class="btn" @click="$back(1)">
					确定
				</view>
			</view>
			<view class="success" v-if="isFail">
				<image :src="baseurl+'associationAdd/24.png'" class="postFail"></image>
				<text class="result">发布失败</text>
				<text class="tips">{{tips}}</text>
				<view class="btn" @click="again">
					再次发布
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '发帖',
					bgColor: 'transparent',
					color: '#fff',
				},
				imgList: [],
				urlList: [],
				title: '',
				content: '',
				id: '',
				isResult:false,
				isSuccess:false,
				isFail:false,
				tips:'很遗憾发布失败，再次发布试试！'
			}
		},
		onLoad(options) {
			// 社群详情
			this.id = options.id;
		},
		methods: {
			again(){
				this.isResult=false;
				this.isFail=false;
			},
			//选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1, //选择几张
					sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择（也可以拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const tempFiles = res.tempFiles;
						this.imgList.push(tempFilePaths[0]);
						uni.uploadFile({
							url: `https://miantou.guguan.net/api/File/formImage`,
							header: {
								"Content-Type": "multipart/form-data",
								"token": JSON.parse(uni.getStorageSync('TOKEN')).value
							},
							filePath: tempFilePaths[0],
							name: "file",
							fileType: "image",
							success: (res) => {
								console.log(res)
								const {
									data
								} = res
								let datas = JSON.parse(data)
								console.log(datas.data.uri)
								let temps = {
									url: datas.data.uri
								}
								this.urlList.push(datas.data.uri);
							},
							fail: (res) => {
								this.$toast('上传失败，请重新上传')
							}
						});
					}
				})
			},
			// 删除图片
			deleteImage(index) {
				this.imgList.splice(index, 1);
				this.urlList.splice(index, 1);
			},
			getValue(value) {
				this.content = value; // 接收子组件传递的值
			},
			submit() {
				if (this.title == '') {
					this.$u.toast('请输入帖子主题')
					return;
				}
				this.$request.post('community/addArticle', {
					content: this.content,
					image: JSON.stringify(this.urlList),
					title: this.title,
					community_id: this.id,
				}).then(res => {
					if(res.data.code==1){
						this.isSuccess=true;
					}else{
						this.isFail=true;
						this.tips=res.data.msg;
					}
					this.isResult=true;
					// this.$navto.navto('/packageB/post_result/post_result', {
					// 	id: res.data.code,
					// 	msg: res.data.msg
					// })
				})
			}
		}
	}
</script>

<style lang="scss">
	.resultBox {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;
		overflow-y: scroll;
	
		.btn {
			width: 252rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			background-color: #4E97AD;
			border-radius: 47rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 90rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
		.tips {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 35rpx;
			color: #919191;
			display: block;
		}
	
		.result {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 70rpx;
			display: block;
	
		}
	
		.postFail {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}
	
		.postSuccess {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}
	}
	.imgBox {
		width: 670rpx;
		margin: 50rpx 0 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.imgItem {
		position: relative;
		width: 154rpx;
		height: 154rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.uploadedImg {
		width: 100%;
		height: 100%;
	}

	.deleteBtn {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #D95945;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		touch-action: none;
	}

	.deleteX {
		width: 18rpx;
		height: 18rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #fff; // 白色线条
			transform: rotate(45deg) translateY(-50%);
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #fff; // 白色线条
			transform: rotate(-45deg) translateY(-50%);
		}
	}

	.add {
		width: 154rpx;
		height: 154rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 60rpx;
		color: #cccccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info {
		margin-left: 35rpx;
		margin-top: 20rpx;
		width: 610rpx;
		height: 600rpx;
		padding: 35rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.title {
		width: 645rpx;
		height: 90rpx;
		border-radius: 15rpx;
		margin-left: 35rpx;
		margin-top: 30rpx;
		background-color: #fff;
		padding-left: 35rpx;
	}

	.headBg {
		width: 100%;
		height: 180rpx;
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;

		.submit {
			width: 490rpx;
			height: 90rpx;
			background: #4E97AD;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			margin-bottom: 150rpx;
			margin-left: 130rpx;
			border-radius: 45rpx;

			.label {
				font-size: 28rpx;
				color: #fff;
			}
		}


		.uploadTitle {
			margin-top: 16rpx;
			margin-left: 40rpx;
			font-size: 28rpx;
		}


	}
</style>